<template>
    <div :class="['message-input', !isPC && 'message-input-h5']">
        <MessageInputAudio :class="[
        'message-input-audio',
        isWeChat && 'message-input-wx-audio',
        isFunctionShow('audio') && 'message-input-wx-audio-open',
      ]" @switchAudio="switchAudio" :isAudioMainShow="isFunctionShow('audio')"></MessageInputAudio>
        <MessageInputEditor v-show="!isFunctionShow('audio')" class="message-input-editor" ref="editor"
            :placeholder="props.placeholder" :isMuted="props.isMuted" :muteText="props.muteText"
            :enableInput="props.enableInput" :enableAt="props.enableAt" :enableTyping="props.enableTyping"
            :isGroup="isGroup" @sendMessage="sendMessage" @onTyping="onTyping" @onAt="onAt" @onFocus="onFocus"
            @onInput="onInput">
        </MessageInputEditor>
        <MessageInputAt v-if="props.enableAt" ref="messageInputAtRef" @insertAt="insertAt" @onAtListOpen="onAtListOpen">
        </MessageInputAt>

        <div class="message-input-emoji"
            style="font-size: 20rpx;height: 37px;display: flex;align-items: center;justify-content: center;padding-left: 10px"
            @click="sendMessage">

            <image src="https://xbb.fuliaoxx.com/img/call/send.png" mode="widthFix" style="width:100rpx;"></image>
        </div>
    </div>
</template>
<script setup lang="ts">
    import TUIChatEngine, {
        TUIGlobal,
        TUIStore,
        StoreName,
        IConversationModel,
    } from "@tencentcloud/chat-uikit-engine";
    import { ref, nextTick } from "../../../adapter-vue";
    import MessageInputEditor from "./message-input-editor.vue";
    import MessageInputAt from "./message-input-at/index.vue";
    import MessageInputAudio from "./message-input-audio.vue";
    import EmojiPickerDialog from "../message-input-toolbar/emoji-picker/emoji-picker-dialog.vue";
    import GiftPickerDialog from "../message-input-toolbar/gift-picker/gift-picker-dialog.vue";
    import Icon from "../../common/Icon.vue";
    import faceIcon from "../../../assets/icon/face-uni.png";
    import moreIcon from "../../../assets/icon/more-uni.png";
    import giftIcon from "../../../assets/icon/gift.png";

    import { sendMessages, sendTyping } from "../utils/sendMessage";

    const props = defineProps({
        placeholder: {
            type: String,
            default: "this is placeholder",
        },
        replyOrReference: {
            type: Object,
            default: () => ({}),
            required: false,
        },
        isMuted: {
            type: Boolean,
            default: true,
        },
        muteText: {
            type: String,
            default: "",
        },
        enableInput: {
            type: Boolean,
            default: true,
        },
        enableAt: {
            type: Boolean,
            default: true,
        },
        enableTyping: {
            type: Boolean,
            default: true,
        },
    });

    const emit = defineEmits([
        "sendMessage",
        "resetReplyOrReference",
        "onTyping",
        "handleToolbarListShow",
    ]);
    const replyOrReference = ref();
    const editor = ref();
    const moreShow = ref(false);
    const messageInputAtRef = ref();
    const currentConversation = ref<typeof IConversationModel>();
    const isPC = ref(TUIGlobal.getPlatform() === "pc");
    const isH5 = ref(TUIGlobal.getPlatform() === "h5");
    const isWeChat = ref(TUIGlobal.getPlatform() === "wechat");
    const isApp = ref(TUIGlobal.getPlatform() === "app");
    const currentFunction = ref<string>("");
    const isGroup = ref<boolean>(false);

    TUIStore.watch(StoreName.CONV, {
        currentConversation: (conversation : typeof IConversationModel) => {
            currentConversation.value = conversation;
            isGroup.value =
                currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
        },
    });

    const switchAudio = (isAudioShow : boolean) => {
        if (isAudioShow) {
            switchEmojiAndFeature("audio");
        } else {
            switchEmojiAndFeature("");
        }
    };

    const switchEmojiAndFeature = (funcName : string) => {
        if (funcName == 'emoji' || funcName == 'gift' || funcName == 'audio') {
            if (moreShow.value == true) {
                nextTick(() => {
                    emit("handleToolbarListShow");
                });
            }
            if (currentFunction.value == funcName) {
                currentFunction.value = "";
            } else {
                moreShow.value = false
                currentFunction.value = funcName;
            }
        } else {
            currentFunction.value = "";
            moreShow.value = true
            nextTick(() => {
                emit("handleToolbarListShow");
            });
        }
        // console.log('c:'+currentFunction.value +'---d:'+funcName)
        // if (currentFunction.value === 'emoji' || currentFunction.value === 'gift') {
        // 	if (funcName === 'emoji' || funcName === 'gift') {
        // 		if (currentFunction.value == funcName) {
        // 			currentFunction.value = "";
        // 		} else {
        // 			currentFunction.value = funcName;
        // 		}
        // 	}
        // 	if (funcName === 'more') {
        // 		currentFunction.value = "";
        // 		nextTick(() => {
        // 			emit("handleToolbarListShow");
        // 		});
        // 	}
        // } else if (currentFunction.value === 'more') {
        // 	emit("handleToolbarListShow");
        // 	if (funcName === 'more') {
        // 		currentFunction.value = "";
        // 	} else {
        // 		nextTick(() => {
        // 			currentFunction.value = funcName;
        // 		});
        // 	}
        // } else {
        // 	if (funcName === 'more') {
        // 		emit("handleToolbarListShow");
        // 	}else{
        // 		if(currentFunction.value==''){
        // 			nextTick(() => {
        // 				emit("handleToolbarListShow");
        // 			});
        // 		}
        // 	}
        // 	currentFunction.value = funcName;
        // }
    };

    const isFunctionShow = (funcName : string) => {
        if (currentFunction.value === funcName) {
            return true;
        }
        return false;
    };

    const onTyping = (inputContentEmpty : boolean, inputBlur : boolean) => {
        sendTyping(inputContentEmpty, inputBlur);
    };
    const inputText = ref('')
    const onInput = (text : any) => {
        inputText.value = text
    };
    const onAt = (show : boolean) => {
        messageInputAtRef?.value?.toggleAtList(show);
    };

    const onFocus = (keyboardHeight ?: number) => {
        if (isH5.value) {
            switchEmojiAndFeature("");
        }
    };

    const resetReplyOrReference = () => {
        console.warn("resetReplyOrReference");
    };

    const sendMessage = async () => {
        let messageList;
        if (editor?.value?.getEditorContent) {
            messageList = editor?.value?.getEditorContent();
        }
        editor?.value?.resetEditor && editor?.value?.resetEditor();
        resetReplyOrReference();
        await sendMessages(
            messageList,
            currentConversation.value,
            replyOrReference.value
        );
        inputText.value = ''
        emit("sendMessage");
    };

    const insertEmoji = (emoji : any) => {
        editor?.value?.addEmoji && editor?.value?.addEmoji(emoji);
    };

    const insertAt = (atInfo : any) => {
        editor?.value?.insertAt && editor?.value?.insertAt(atInfo);
    };

    const onAtListOpen = () => {
        editor?.value?.blur && editor?.value?.blur();
    };

    // 消息撤回后重新编辑
    const reEdit = (content : any) => {
        editor?.value?.resetEditor();
        resetReplyOrReference();
        editor?.value?.setEditorContent(content);
    };

    defineExpose({
        insertEmoji,
        reEdit,
    });
</script>

<style scoped lang="scss">
    @import url("../../../assets/styles/common.scss");

    .message-input {
        position: relative;
        display: flex;
        flex-direction: column;
        border: none;
        height: 100%;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        overflow: hidden;
        background: #ebf0f6;

        &-editor {
            flex: 1;
            display: flex;
        }

        &-button {
            width: fit-content;
        }

        .icon {
            width: 23px;
            height: 23px;

            &-face {
                margin: 7px;
            }

            &-more {
                margin: 7px 0px;
            }
        }

        &-wx {
            &-audio {
                &-open {
                    flex: 1;
                }
            }
        }

        &-emoji-picker {
            padding-top: 10px;
        }
    }

    .message-input-h5 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        height: calc(100% - 20px);
        width: calc(100% - 20px);
        max-height: 100%;
        // max-width: calc(100% - 20px);
        padding: 10px;
        overflow: hidden;

    }
</style>